<template>
  <!-- <audio ref="audioRef" autoplay src="http://minio.mw.com:39000/lingyang-boot/voice/2023/08/20/1/452165688037381.mp3"></audio> -->
  <audio-player
    ref="audioPlayerRef"
    v-bind="$attrs"
    :audio-list="audioList.map((elm) => elm.url)"
    @loadedmetadata="handleLoadedMetadata"
  />
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick, watch} from 'vue';
import AudioPlayer from "@liripeng/vue-audio-player";
import { useAttrs } from '/@/hooks/core/useAttrs';
import { propTypes } from '/@/utils/propTypes';
import { useMessage } from '/@/hooks/web/useMessage';
import { useRouter } from "vue-router"
const router = useRouter()
const audioPlayerRef = ref<any>()
const emit = defineEmits(['loaded-metadata']);
const { createWarningModal, notification } = useMessage()
const attrs = useAttrs();
const props = defineProps({
  /**
   * 格式:
   * {
   *   url: "http://www.ytmp3.cn/down/76857.mp3",
   * },
   */
  audioList: propTypes.array.def([])
});

onMounted(() => {
 
})

onUnmounted(() => {
  console.log('=================================> 组件卸载了', props);
})
const handleLoadedMetadata = (e) => {
  const duration = audioPlayerRef.value.duration
  console.log('duration', duration);
  emit('loaded-metadata', {duration})
}

</script>

<style lang="less" scoped>

</style>